<div class="container">
    <h2>关于项目</h2>

    <h3>项目特点</h3>
    <ul class="feature-list">
        <li>✅ 工程化项目结构，代码模块化组织</li>
        <li>✅ Express.js 后端提供 RESTful API</li>
        <li>✅ Vue.js 3 前端实现响应式界面</li>
        <li>✅ 完整的 CRUD 操作（增删改查）</li>
        <li>✅ 数据验证和错误处理</li>
        <li>✅ 前后端分离架构</li>
        <li>✅ SPA（单页应用）支持</li>
        <li>✅ 现代化 UI 设计</li>
        <li>✅ 用户、博客、分类、评论多重管理功能</li>
        <li>✅ 搜索和过滤功能</li>
        <li>✅ 文章分类和评论系统</li>
        <li>✅ 响应式设计，适配移动设备</li>
        <li>✅ 组件化开发，模块化管理</li>
        <li>✅ 公共模块提取，提高代码复用性</li>
    </ul>

    <h3>技术栈</h3>
    <ul class="feature-list">
        <li><strong>后端:</strong> Node.js, Express.js</li>
        <li><strong>前端:</strong> Vue.js 3 (CDN 版本)</li>
        <li><strong>项目结构:</strong> 工程化模块化组织</li>
        <li><strong>工具函数:</strong> 日期格式化、文本截取、ID生成等</li>
    </ul>

    <h3>工程化特性</h3>
    <ul class="feature-list">
        <li>📁 清晰的目录结构 (controllers, models, routes, middleware, utils 等)</li>
        <li>⚙️ 配置管理</li>
        <li>🔄 模块化代码组织</li>
        <li>🛡️ 错误处理中间件</li>
        <li>🧪 可扩展的设计</li>
        <li>🧰 工具函数库</li>
        <li>📦 组件化开发</li>
        <li>🔗 模块间松耦合</li>
    </ul>

    <h3>学习要点</h3>
    <ul class="feature-list">
        <li>Express.js 应用程序结构</li>
        <li>RESTful API 设计</li>
        <li>Vue.js 响应式编程</li>
        <li>前后端数据交互</li>
        <li>工程化项目组织</li>
        <li>错误处理机制</li>
        <li>HTTP 状态码使用</li>
        <li>数据验证和处理</li>
        <li>搜索和过滤实现</li>
        <li>模态框和组件交互</li>
        <li>组件化开发实践</li>
        <li>模块化设计思想</li>
    </ul>
</div>